<template>
  <w-base ref="WBase" :input="false" :souce-url="souceUrl" :size="size" />
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import WBase, { BaseImageUpType } from '@/components/global/imageUp/base'
import { Api } from '@/config/api'

@Component({
  name: 'ComGlobalImageUp',
  components: {
    WBase
  }
})
export default class ComGlobalImageUp extends Vue {
  @Prop({ type: String, default: '200px' }) size!: string

  // 服务器获取的文件数据
  serverFileData = ''
  // 图片原图
  souceUrl = ''

  /**
   * 上传图片
   * @returns {*}
   */
  upImage () {
    return new Promise((resolve, reject) => {
      (this.$refs.WBase as BaseImageUpType).getImage()
        .then((data) => {
          if (data.type === 'SEL_FILE') {
            this.$wAxios
              .$upImage(Api.server.imageUp, 'file', data.event)
              .then((data) => {
                (this.$refs.WBase as BaseImageUpType).clear()
                this.souceUrl = data.serverPath
                this.serverFileData = data
                resolve(data)
              })
              .catch((err) => {
                reject(err)
              })
          } else {
            resolve(this.serverFileData)
          }
        })
        .catch((err) => {
          reject(err)
        })
    })
  }

  /**
   * 清除数据
   */
  clear () {
    this.souceUrl = ''
    this.serverFileData = '';
    (this.$refs.WBase as BaseImageUpType).clear()
  }
}
</script>

<style lang="less" scoped></style>
